<template>
    <div class="dashboard-editor-container">
        <el-row :gutter="8">
            <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}">
                <div class="col-inner guide-items">
                    <div class="tips">
                        常用功能
                    </div>
                    <template v-for="(item, index) in guideData">
                    <div class="guideItem">
                        <a :href="item.link" :style="{background: item.bgColor,margin: item.margin}">
                            <div>
                                {{item.title}} <br/>
                                <svg-icon :icon-class="item.icon" />
                            </div>
                        </a>
                    </div>
                </template>
                </div>
            </el-col>
            <el-col v-if="roles.indexOf('4') < 0" :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}">
                <div class="col-inner">
                    <div class="tips">
                        今日工作
                        <a href="#/work/today">更多...</a>
                    </div>
                    <div class="fast-date">
                        <a @click="preWork">前一天</a>
                        {{dateWork}}
                        <a @click="afterWork" style="float: right;">后一天</a>
                    </div>
                    <el-table :data="workList" :show-header="hideHeader" style="width: 100%;padding-top: 15px;">
                        <el-table-column align="left">
                            <template slot-scope="scope">
                                <a href="#/work/today">进厂批次{{scope.row.batch}}</a>
                            </template>
                        </el-table-column>
                        <el-table-column align="right">
                            <template slot-scope="scope">
                                共计 {{scope.row.clothesCnt}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="sum_info">
                    合计：{{workTotal}}
                </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="8" style="margin-top: 10px;">
            <el-col v-if="roles.indexOf('5') < 0" :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}">
                <div class="col-inner">
                    <div class="tips">
                        我的签收
                        <a href="#/receive/list">更多...</a>
                    </div>
                    <el-table :data="receiveList" style="width: 100%;padding-top: 15px;">
                    <el-table-column label="签收时间" align="left">
                        <template slot-scope="scope">
                            {{scope.row.receiveTime}}
                        </template>
                    </el-table-column>
                    <el-table-column label="进厂批次" align="center">
                        <template slot-scope="scope">
                            <a v-if="scope.row.status == 2" :href="'#/receive/detail?id='+scope.row.id">进厂批次{{scope.row.batchOrderCode}}</a>
                            <a v-else href="#/receive/in">进厂批次{{scope.row.batchOrderCode}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" align="right">
                        <template slot-scope="scope">
                            {{scope.row.statusName}}
                        </template>
                    </el-table-column>
                </el-table>
                </div>
            </el-col>
            <el-col v-if="roles.indexOf('4') < 0" :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}">
                <div class="col-inner">
                    <div class="tips">
                        工作汇总
                        <a href="#/work/sum">更多...</a>
                    </div>
                    <div class="fast-date">
                        <a @click="preSum">前一天</a>
                        {{dateSum}}
                        <a @click="afterSum" style="float: right;">后一天</a>
                    </div>
                    <el-table :data="sumList" :show-header="hideHeader" style="width: 100%;padding-top: 15px;">
                        <el-table-column align="left">
                            <template slot-scope="scope">
                                <a :href="'#/work/sum?id='+scope.row.batch">出厂批次{{scope.row.batch}}</a>
                            </template>
                        </el-table-column>
                        <el-table-column align="right">
                            <template slot-scope="scope">
                                共计{{scope.row.total_bagCnt}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="sum_info">
                    合计：{{sumTotal}}
                </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { hospitalBatchOrderList } from '@/api/hospital'
  import { fetchFactoryBatchOrder } from '@/api/factory'
  import { fetchLogisOrderList } from '@/api/logis'
  import { parseTime, formatSearchTime } from '@/utils'

  export default {
    name: 'dashboard',
    components: {
    },
    data() {
      return {
        guideData: [],
        workList: [],
        receiveList: [],
        sumList: [],
        sumTotal: 0,
        workTotal: 0,
        dateWork: parseTime(new Date(), '{y}年{m}月{d}日'),
        dateSum: parseTime(new Date(), '{y}年{m}月{d}日'),
        hideHeader: false
      }
    },
    mounted() {
      if (this.roles.indexOf('5') < 0) {
        this.guideData.push({
          icon: 'receivein',
          title: '进厂签收',
          bgColor: '#409EFF',
          link: '#/receive/in'
        })
      }
      if (this.roles.indexOf('4') < 0) {
        this.guideData.push({
          icon: 'piecelist',
          title: '我要计件',
          bgColor: '#67C23A',
          link: '#/piece/work'
        }, {
          icon: 'orderout',
          title: '出厂下单',
          bgColor: '#F56C6C',
          link: '#/order/out'
        }, {
          icon: 'packagelist',
          title: '我要打捆',
          bgColor: '#E6A23C',
          link: '#/pack/pack'
        })
      }
      this.fetchData()
    },
    computed: {
      ...mapGetters([
        'roles'
      ])
    },
    methods: {
      fetchData() {
        if (this.roles.indexOf('4') < 0) {
          this.fetchWork()
          this.fetchSum()
        }
        if (this.roles.indexOf('5') < 0) {
          this.fetchReceive()
        }
      },
      fetchWork() {
        hospitalBatchOrderList({ page: 1, size: 10, startTime: formatSearchTime(this.dateWork, true), endTime: formatSearchTime(this.dateWork) }).then(response => {
          this.workList = response.data && response.data.list || []
          this.workTotal = response.data && response.data.allClothesCnt || 0
        })
      },
      fetchSum() {
        fetchFactoryBatchOrder({ page: 1, size: 10, startTime: formatSearchTime(this.dateSum, true), endTime: formatSearchTime(this.dateSum) }).then(response => {
          this.sumList = response.data && response.data.list || []
          this.sumTotal = response.data && response.data.allClothesCnt || 0
        })
      },
      fetchReceive() {
        var date = parseTime(new Date(), '{y}年{m}月{d}日')
        fetchLogisOrderList({ page: 1, size: 10, type: 1, startTime: formatSearchTime(date, true), endTime: formatSearchTime(date) }).then(response => {
          this.receiveList = response.data && response.data.list || []
        })
      },
      preWork() {
        this.dateWork = this.genDate(this.dateWork, true)
        this.fetchWork()
      },
      afterWork() {
        this.dateWork = this.genDate(this.dateWork)
        this.fetchWork()
      },
      preSum() {
        this.dateSum = this.genDate(this.dateSum, true)
        this.fetchSum()
      },
      afterSum() {
        this.dateSum = this.genDate(this.dateSum)
        this.fetchSum()
      },
      genDate(str, pre) {
        str = str.replace(/[^\0x00-\xff]/g, '/')
        if (pre) {
          return parseTime(new Date(str).getTime() - 24 * 60 * 60 * 1000, '{y}年{m}月{d}日')
        }
        return parseTime(new Date(str).getTime() + 24 * 60 * 60 * 1000, '{y}年{m}月{d}日')
      },
      resize() {
        console.log('resize')
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .dashboard-editor-container {
        padding: 32px;
        background-color: rgb(240, 242, 245);
    .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
        }
    }
    .guideItem {
        width: 50%;
        float: left;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        color: #fff;
        background: #fff;
        a {
            min-height: 180px;
            display: block;
            box-sizing: content-box;
            position: relative;
            div{
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -50px;
                margin-top: -20px;
                svg{
                    font-size: 30px;
                }
            }
        }
    }
    .tips {
        padding: 5px 10px;
        background: #fff;
        a{
            cursor: pointer;
            color: blue;
            float: right;
        }
    }
    .fast-date {
        height: 40px;
        line-height: 30px;
        text-align: center;
        background: #ffffff8a;
        padding-top: 10px;
        a {
            color: #409EFF;
            float: left;
            margin: 0 10px;
            font-weight: 700;
        }
    }
    .sum_info {
        height: 40px;
        line-height: 40px;
        text-align: right;
        background: #ffffff8a;
        padding-right: 10px;
    }
    .col-inner {
        background: #fff;
    }
    .col-inner:after {
        content: ' ';
        clear: both;
        display: block;
    }
    .col-inner.guide-items div:nth-child(2) {
        padding: 0 5px 10px 0;
    }
    .col-inner.guide-items div:nth-child(3) {
        padding: 0 0 10px 5px;
    }
    .col-inner.guide-items div:nth-child(4) {
        padding: 0 5px 0 0;
    }
    .col-inner.guide-items div:nth-child(5) {
        padding: 0 0 0 5px;
    }
</style>
